<template>
  <div>
    <h1>v-for渲染列表案例</h1>
    <table>
      <tr>
        <th>id</th>
        <th>username</th>
        <th>age</th>
        <th>sex</th>
      </tr>
      <tr v-for="(item, index) in userList" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.username }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.sex }}</td>
      </tr>
    </table>
  </div>
</template>
<script setup>
import { reactive, toRefs } from "vue";
const userList = reactive([
  { id: 1, username: "张三", age: 18, sex: "男" },
  { id: 2, username: "李四", age: 19, sex: "女" },
  { id: 3, username: "王五", age: 20, sex: "男" },
  { id: 4, username: "赵六", age: 21, sex: "女" },
  { id: 5, username: "田七", age: 22, sex: "男" }
]);
</script>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
</style>
